<template>
  <div>
    <div class="m13Condition">
      <router-link to="">
        <img
          src="../assets/img/箭头.png"
          alt=""
          onclick="window.history.go(-1)"
      /></router-link>
      <h3>网点查询</h3>
      <img src="../assets/img/错号.png" alt="" />
    </div>
    <!-- 太原市 -->
    <div class="m13sous">
      <div class="m13sous1">
        <p>太原市</p>
        <span><img src="../assets/img/小三角down(1).png" alt="" /> |</span>
      </div>

      <div class="m13sous12">
        <form action="/">
          <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
            @change="guanj"
          />
        </form>
      </div>
    </div>

    <!-- 地理位置 -->
    <div
      id="m13place"
      v-for="(item, index) in palcee"
      :key="index"
      @click="fuwu(item.data, item.distance, item.address)"
    >
      <img src="../assets/img/地点，定位.png" />
      <p>{{ item.data }} <span class="m13pp">营业中</span></p>
      <div class="m13zzx">
        <span class="m13zz">{{ item.distance | mess }}千米</span>
        <span class="m13zz1">|</span>
        <span class="m13zz2">{{ item.address }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from "vant";
import { cond, condi } from "../api/Condition";
export default {
  data() {
    return {
      value: "",

      palcee: [],
    };
  },
  created() {
    this.asdasd();
  },

  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
    },
    //网点查询
    asdasd() {
      let a = { location: "37.877346,112.568001" };
      cond(a)
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            console.log(res.data);
            this.palcee = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //  关键字
    guanj() {
      let o = { location: "37.877346,112.568001", word: this.value };
      condi(o).then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          if (res.data.length == 0) {
            Dialog.alert({
              message: "非常抱歉,查无此网点",
            }).then(() => {
              // on close
            });
          } else {
            this.palcee = res.data;
          }
        }
      });
    },
    fuwu(A, B, C) {
      this.$router.push({
        name: "Branch",
        params: {
          A: A,
          B: B,
          C: C,
        },
      });
    },
  },
  filters: {
    mess(val) {
      if (val.length <= 4) {
        return val;
      }
      return val.slice(0, 4);
    },
  },
};
</script>

<style scoped src="../assets/css/condition.css"></style>
